<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="nprogress.css">
    <style>
        th,
        td {
            width: 100px;
            padding: 10px 20px;
        }
        
        #addTable,
        #mask,
        #change {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #addTable {
            left: 50%;
            top: 50px;
            margin-left: -250px;
            width: 500px;
            background-color: #fff;
            z-index: 333;
        }
        
        #change {
            left: 50%;
            margin-left: -250px;
            width: 500px;
            background-color: #fff;
            z-index: 333;
            top: 50px;
        }
        #closeTab,
        #closeChange {
            position: absolute;
            width: 15px;
            height: 15px;
            border: 1px solid #333333;
            text-align: center;
            line-height: 15px;
            top: 0;
            right: 0;
            cursor: pointer;
        }
        #closeTab:hover{
            color: white;
            background-color: rgba(0,0,0,0.5);
        }
        #closeChange:hover{
            color: white;
            background-color: rgba(0,0,0,0.5);
        }
        #mask {
            width: 100%;
            height: 100%;
            background-color: #8d8d8d;
        }
        
        .pages {
            /* width: 200px; */
            padding: 20px 0 0 0;
            display: flex;
            justify-content: center;
        }
        
        button {
            height: 30px;
            /* width: 30px; */
            margin: 0 3px;
            border: none;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #333333;
            color: #fff;
        }
    </style>

    <script src="js/jquery-1.12.1.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/showMess.js"></script>
</head>

<body>
    <div>
        <button type="button" id="add">新增</button>
        <button type="button" id="refresh">刷新</button>
    </div>
    <table border="1" cellspacing="0" cellpadding="0" align="center">
        <caption>查询档案</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="tb">

        </tbody>
    </table>

    <div class="pages">
        <button type="button" id="left">&lt;</button>
        <span id="pages">

    </span>
        <button type="button" id="right">&gt;</button>
    </div>


    <div id="addTable">
        <span id="closeTab">×</span>
        <table border="1" cellspacing="0" cellpadding="0" align="center">
            <caption>新增信息</caption>
            <tr>
                <td>名字</td>
                <td><input type="text" name="courseName" id="name"><span class="content"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="courseNo" id="num"><span class="content"></span></td>
            </tr>
            <tr>
                <td><button type="button" id="addMess">添加</button></td>
            </tr>
        </table>
    </div>
    <div id="change">
        <span id="closeChange">×</span>
        <table border="1" cellspacing="0" cellpadding="0" align="center">
            <caption>修改信息</caption>
            <tr>
                <td>名字</td>
                <td><input type="text" name="courseName" id="changeName"><span class="content"></span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type="text" name="courseNo" id="changeNum"><span class="content"></span></td>
            </tr>
            <tr>
                <td><button type="button" id="changeMess">修改</button></td>
            </tr>
        </table>
    </div>
    <div id="mask"></div>



</body>

</html>